import React from 'react';

const getStyle = (line: number): React.CSSProperties => {
  if (line === 1) {
    return {
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
    };
  }

  return {
    display: '-webkit-box',
    wordBreak: 'break-all',
    WebkitBoxOrient: 'vertical',
    WebkitLineClamp: line,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  };
};

export type ContentWrapperProps = {
  /** 展示几行 */
  line: number;
  /** 自定义类名 */
  className?: string;
  children: React.ReactNode;
  /** 颜色 */
  color: string;
  /** 文字大小 */
  fontSize: number | string;
  /** 是否粗体 */
  bold?: boolean;
  /** 字体 */
  fontFamily?: string;
  /** 行高 */
  lineHeight?: string;
  styles?: React.CSSProperties;
};

export const ContentWrapper = ({
  line = 1,
  className = '',
  children,
  color = '',
  fontSize,
  lineHeight = '1.5',
  bold = false,
  fontFamily,
  styles,
}: ContentWrapperProps) => {
  return (
    <div
      className={className}
      style={{
        ...getStyle(line),
        color,
        lineHeight,
        fontSize,
        fontWeight: bold ? 'bold' : 'normal',
        fontFamily: fontFamily,
        ...styles,
      }}
    >
      {children}
    </div>
  );
};
